<template>

  <a-button type="primary" @click="toAddQuestion">添加题目</a-button>
  <a-table :data="data" style="margin-top: 30px"
           :pagination="{pageSize:searchParams.pageSize,current:searchParams.current,total:total,showTotal:true}"
            @page-change="onPageChange"
  >
    <template #columns>
      <a-table-column title="id" data-index="id"></a-table-column>
      <a-table-column title="标题" data-index="title"></a-table-column>
      <a-table-column title="标签" data-index="tags">
        <template #cell="{record}">
          <span style="margin-left: 16px" v-for="(item,index) in record.tags" :key="index">
            <a-tag color="blue">{{record.tags[index]}}</a-tag>
          </span>
        </template>

      </a-table-column>
      <a-table-column title="提交数" data-index="submitNum"></a-table-column>
      <a-table-column title="通过数" data-index="acceptedNum"></a-table-column>
      <a-table-column title="判题配置">
        <a-table-column title="时间限制">
          <template #cell="{ record }">
            {{ record.judgeConfig?.timeLimit == null ? '无' : record.judgeConfig.timeLimit }}
          </template>
        </a-table-column>
        <a-table-column title="内存限制">
          <template #cell="{ record }">
            {{ record.judgeConfig?.memoryLimit == null ? '无' : record.judgeConfig.memoryLimit }}
          </template>
        </a-table-column>
        <a-table-column title="堆栈限制" data-index="judgeConfig.stackLimit">
          <template #cell="{ record }">
            {{ record.judgeConfig?.stackLimit == null ? '无' : record.judgeConfig.stackLimit }}
          </template>
        </a-table-column>
      </a-table-column>
      <a-table-column title="创建用户" data-index="userVO.userName"></a-table-column>
      <a-table-column title="创建时间" data-index="userVO.createTime"></a-table-column>
      <a-table-column title="操作">
        <template #cell="{ record }">
          <a-button type="primary" @click="doUpdate(record)">修改</a-button>
          <a-button type="text" status="success" @click="doDelete(record.id)">删除</a-button>
        </template>
      </a-table-column>
    </template>

  </a-table>
</template>

<script lang="ts" setup>
import {onMounted, ref, watchEffect} from 'vue';
import {QuestionControllerService} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import {useRouter} from "vue-router";

const show = ref(true)
const router = useRouter();
let data = ref([])
let total = ref();
const searchParams = ref({
  pageSize: 2,
  current: 1
})

/**
 * 跳转添加题目页面
 */
const toAddQuestion=()=>{
  router.push({
    path:'/addQuestion'
  })
}


const listPageData = async () => {
  const res = await QuestionControllerService.listQuestionVoByPageUsingPost(searchParams.value as any)
  data.value = res.data.records
  total.value = res.data.total
}

//修改方法
const  doUpdate= async (data:any)=>{
  await router.push({
    path:'/updateQuestion/'+data.id
  })
}
//删除方法
const doDelete =  async (id:number)=>{
  const res = await QuestionControllerService.deleteQuestionUsingPost({id:id})
  if(res.code==0){
      message.success('操作成功')
    await listPageData();
  }else {
    message.error(res.message)
  }
}
//分页方法
const onPageChange=(page:number)=>{
  // searchParams.value.current =page
  searchParams.value ={
    ...searchParams.value,//把原来的值复制过来
    current: page
  }
}

/**
 * 当方法里面的参数发生改变时 就会触发此方法
 */
watchEffect(()=>{
  listPageData();
})

onMounted(() => {
  listPageData();
})

</script>